/**
 * 概要：验证码功能的数据来自自家项目或者三方的接口，因此需要使用网络请求，还需要注意是否可以跨域，如果不支持跨域，我们可能需要在本地做代理操作。在写代码的过程中注意封装的特性。
 * 注意点：
 *    1.验证码的key值不适合写在当前组件，因为当前组件可能被一个组件同时使用，进而产生key值覆盖的问题
 *    2.子传父的情况：
 *          这个地方不能使用ref，如果用ref会导致验证码与key值可能存在不匹配的情况
 *      a. 需要在使用验证码的组件中去导入并使用验证码组件
//       b. 该组件接收三个props属性：
//           w：验证码宽度，默认值120
//           h：验证码高度，默认值40
//           setKey：用于让父组件获取并保存key值的方法，必须传递，且父并需定义
 */
import React, { Component } from 'react'
import axios from 'axios'
class Captcha extends Component {
  static defaultProps = {
    w: 120,
    h: 36
  }
  state = {}
  //清除axios的副作用（1）
  source = axios.CancelToken.source()
  render() {
    return (
      <>
        <img
          src={this.state.img}
          alt="验证码"
          title="点击刷新验证码"
          onClick={this.loadCaptcha}
          width={this.props.w}
          height={this.props.h}
        />
      </>
    )
  }
  componentDidMount() {
    this.loadCaptcha()
  }
  // 请求网络--获取验证码信息
  loadCaptcha = () => {
    axios
      .get('https://reactapi.iynn.cn/captcha/api/math', {
        cancelToken: this.source.token
      })
      .then((res) => {
        // res.data是网络请求的返回值
        this.setState(res.data)
        // 父传来一个方法，将key值写给父
        // 父亲那里在子的标签内<Captcha saveKey={this.sev}/>调用props的方法，sev是个接收这个key的函数sev=(key)=>{this.setState({key})}---把key这个方法放在父亲的state里面
        this.props.saveKey(res.data.key)
      })
      .catch((e) => {}) //事件捕获（3）
  }
  componentWillUnmount() {
    // 取消请求（2）
    this.source.cancel()
  }
}

export default Captcha
